<template>
  <div class="mapIndex">
    <div class="changeButton">
        <div :class="active=='dz'?'buttonDiv  active':'buttonDiv'" @click="buttonClick('dz')"> 地震</div>
        <div  :class="active=='wz'?'buttonDiv  active':'buttonDiv'" @click="buttonClick('wz')">微震</div>
        <div :class="active=='oh'?'buttonDiv  active':'buttonDiv'" @click="buttonClick('oh')"> 耦合预警 </div>
    </div>
     <vae-map id="map_dycj"  :options="options" :baseLayers="baseLayers"    @init-map="initMap" ></vae-map>
  </div>
</template>
<script>
import  geojson from "@/../public/mapJson/100000_full.json"
import Vue from 'vue'
import vpopup from './popup_dycj.vue'
export default {
  name: "map",
  props:{
    vm:null
  },
  data() {
    return {
      options:{
        zoom:3.5,
        zoomDelta:0.2,
      },
      baseLayers:['GaoDe.Satellite.Map','GaoDe.Satellite.Annotion'],
      // baseLayers:L.layerGroup(),
      map:null,
      markerLayers:L.layerGroup(),
      markers:new Map(),
      geojsonMap:null,
      allMineData:[],
      active:"1",
      levelMap:{
        "01":"#db2d2d ",
        "02":"#fc7500",
        "03":"#e3ca21",
        "04":"#00b4ff",
      },
      iconFont:{
        "ts":'icon iconfont icon-jiance',//态势预警更名-态势监测
        "sg":'icon iconfont icon-zhuizong',//事故预警更名-事故追踪
        "zh":'icon iconfont icon-tianqi1',//灾害更名-极端天气
        "ws":'icon iconfont icon-wasi',//瓦斯预警-更名-地压冲击
        "jd":'icon iconfont icon-kuangyadiya',//瓦斯预警
        "gz":'icon iconfont icon-fenxi',//感知预警-更名综合分析
      },
      active:"dz",
      tileLayer: L.layerGroup(),
      mapObj:{
        "dz":[
          {"id":1,"area":"青海","address":"海西州茫崖市","lat":38.14,"lng":93.81,"level":5.8,"time":"2021年6月16日16时48分","msg":"青海海西州茫崖市发5.8级地震"},
          {"id":2,"area":"云南","address":"楚雄州双柏县","lat":24.34,"lng":101.91,"level":5.1,"time":"2021年6月10日19时46分","msg":"云南楚雄州双柏县发生5.1级地震"},
          {"id":3,"area":"云南","address":"德宏州盈江县","lat":24.96,"lng":97.89,"level":"5.0 ","time":"2021年6月12日18时0分","msg":"云南德宏州盈江县发生5级地震"},
          {"id":4,"area":"青海","address":"果洛州玛多县","lat":34.74,"lng":98,"level":4.9,"time":"2021年7月8日21时23分","msg":"青海果洛州玛多县发生4.9级地震"},
          {"id":5,"area":"新疆","address":"阿克苏地区库车市","lat":41.12,"lng":83.45,"level":4.7,"time":"2021年6月25日9时42分","msg":"新疆阿克苏地区库车市发生4.7级地震"},
          {"id":6,"area":"新疆","address":"阿克苏地区温宿县","lat":41.65,"lng":81.01,"level":4.6,"time":"2021年7月8日21时5分","msg":"新疆阿克苏地区温宿县发生4.6级地震"},
          {"id":7,"area":"云南","address":"楚雄州双柏县","lat":24.31,"lng":101.89,"level":4.6,"time":"2021年6月28日19时48分","msg":"云南楚雄州双柏县发生4.6级地震"},
          {"id":8,"area":"新疆","address":"伊犁州昭苏县","lat":43.18,"lng":81.53,"level":4.5,"time":"2021年7月2日9时15分","msg":"新疆伊犁州昭苏县发生4.5级地震"},
          {"id":9,"area":"青海","address":"果洛州玛沁县","lat":34.47,"lng":99.02,"level":4.4,"time":"2021年7月7日15时27分","msg":"青海果洛州玛沁县发生4.4级地震"},
          {"id":10,"area":"云南","address":"昭通市威信县","lat":28.05,"lng":104.99,"level":4.2,"time":"2021年7月7日4时19分","msg":"云南昭通市威信县发生4.2级地震"},
          {"id":11,"area":"云南","address":"楚雄州双柏县","lat":24.33,"lng":101.91,"level":4.2,"time":"2021年6月16日15时35分","msg":"云南楚雄州双柏县发生4.2级地震"},
          {"id":12,"area":"青海","address":"果洛州玛沁县","lat":34.5,"lng":98.95,"level":4.1,"time":"2021年7月7日18时1分","msg":"青海果洛州玛沁县发生4.1级地震"},
          {"id":13,"area":"青海","address":"果洛州玛多县","lat":34.68,"lng":98.28,"level":"4.0 ","time":"2021年7月6日9时50分","msg":"青海果洛州玛多县发生4级地震"},
          {"id":14,"area":"四川","address":"甘孜州石渠县","lat":32.92,"lng":99.02,"level":"4.0 ","time":"2021年7月5日5时48分","msg":"四川甘孜州石渠县发生4级地震"},
          {"id":15,"area":"青海","address":"果洛州玛多县","lat":34.8,"lng":97.55,"level":"4.0 ","time":"2021年6月15日12时0分","msg":"青海果洛州玛多县发生4级地震"},
          {"id":16,"area":"新疆","address":"阿克苏地区库车市","lat":42.07,"lng":83.62,"level":3.9,"time":"2021年7月2日7时8分","msg":"新疆阿克苏地区库车市发生3.9级地震"},
          {"id":17,"area":"河北","address":"张家口市张北县","lat":41.17,"lng":114.41,"level":3.9,"time":"2021年6月22日11时14分","msg":"河北张家口市张北县发生3.9级地震"},
          {"id":18,"area":"青海","address":"果洛州玛多县","lat":34.83,"lng":97.51,"level":3.9,"time":"2021年6月12日20时48分","msg":"青海果洛州玛多县发生3.9级地震"},
          {"id":19,"area":"新疆","address":"阿克苏地区沙雅县","lat":41.12,"lng":83.55,"level":3.8,"time":"2021年6月25日12时57分","msg":"新疆阿克苏地区沙雅县发生3.8级地震"},
          {"id":20,"area":"四川","address":"绵阳市江油市","lat":32.2,"lng":104.94,"level":3.8,"time":"2021年6月23日5时11分","msg":"四川绵阳市江油市发生3.8级地震"},
          {"id":21,"area":"云南","address":"普洱市澜沧县","lat":22.65,"lng":100.33,"level":3.8,"time":"2021年6月20日11时31分","msg":"云南普洱市澜沧县发生3.8级地震"},
        ],
        "wz":[
            {"id":"w1","area":"郭家河煤矿","lat":34.865332,"lng":107.549773,"address":"陕西宝鸡市","time":"2019/5/20","msg":"发生微震大能量事件"},
            {"id":"w2","area":"梁宝寺煤矿","lat":35.538823,"lng":116.235921,"address":"山东肥城","time":"2021/6/7","msg":"发生微震大能量事件"},
            {"id":"w3","area":"门克庆煤矿","lat":35.01504,"lng":116.687359,"address":"内蒙古鄂尔多斯市","time":"2018/4/2","msg":"发生微震大能量事件"},
            {"id":"w4","area":"红阳三矿","lat":41.506184,"lng":123.244475,"address":"陕西辽阳市","time":"2019/3/1","msg":"发生微震大能量事件"},
        ],
        "oh":[
          {
              id:"O1",
              "time":"2021/6/11",
              "msg":"内蒙古鄂尔多斯伊金霍洛旗发生3.0级地震，结合该地区微震大能量事件及地压冲击历史，请区域内矿井注意防范",
              "address":"鄂尔多斯市伊金霍洛旗",
              "lat":"39.605457",
              "lng":"109.780461",
              "zjyx":"1县",
              "jjyx":"2县",
              "mk":"红庆河煤矿、石拉乌素煤矿、营盘壕煤矿",
              "num":"450"
            },
            {
              id:"O2",
              "time":"2021/7/9",
              "msg":"山东临沂兰陵县发生2.2级地震，结合该地区微震大能量事件及地压冲击历史，请区域内矿井注意防范",
              "address":"山东临沂",
              "lat":"35.136889",
              "lng":"118.356063",
              "zjyx":"1县",
              "jjyx":"2县",
              "mk":"滕东煤业、田陈煤矿、七五煤业",
              "num":"600"
            }
          ]
      },
    }
  },
  created(){
  },
  methods:{
      initMap(v){
        this.map=v;
        this.initMarker()
      },
      buttonClick(type){
        this.active=type;
        this.initMarker();
        this.map.setView([34.2943,117.357],4)
        this.vm.$refs.dycjzhyjView.filterMapJson(this.active)
        if(this.active=='oh'){
            this.vm.$refs.dycjzhyjView.defaultOh()
        }
      },
      initAll(){
        this.baseLayers.clearLayers();
        this.baseLayers.addTo(this.map);
        this.geojsonMap=  L.geoJSON(geojson.features, {
          style: (feature) => {
            return {
              fillColor: "#5a7ace",
              weight: 2,
              opacity: 1,
              color: '#0262ea',
              dashArray: '1',
              fillOpacity: 0.6,
              data: {},
            }
          },
          onEachFeature: (feature, layer) => {//遍历每一个数据，也就是为每一个地点加上监听器
            let name = feature.properties.name.slice(0, 2);
            let divIcon = L.divIcon({
              html: `<div style="font-size: 3px;color: #fff">${name == '内蒙' || name == '黑龙' ? feature.properties.name.slice(0, 3) : name}</div>`,
              className: 'text-light',
              iconSize: [40, 16],
            })
            if (feature.properties.center) {
              L.marker([feature.properties.center[1] - 0.6, feature.properties.center[0] - 0.2], {riseOffset: 0, direction: 'left',interactive: true,  draggable: false }).setIcon(divIcon).addTo(this.baseLayers)
              layer.on({ mouseover: this.highlightFeature,  mouseout: this.resetHighlight, });
            }
          },
        }).addTo(this.map);
        this.map.fitBounds(this.geojsonMap.getBounds());
        this.initMarker()
      },
      //公共样式
      resetHighlight(e) {//当鼠标退出后reset
          var layer = e.target;
          layer.closePopup();
          this.geojsonMap.resetStyle(e.target);//  geojson要先定义
        },
      highlightFeature(e) {//当鼠标拂过时高亮显示
          var layer = e.target;
          layer.openPopup();
          layer.setStyle({
            weight: 3,
            dashArray: '',
            color: '#0723db',
            fillOpacity: 0.6,
            fillColor: "#1CDDFF"
          });
          if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {
            layer.bringToFront();
          }
        },
      mapFillColor(feature,) {
          return {
            fillColor: this.getColor(feature.properties.adcode).color,
            weight: 2,
            opacity: 1,
            color: 'white',
            dashArray: '1',
            fillOpacity: 0.7,
            data: this.getColor(feature.properties.adcode).data
          }
      },
      async  initMarker() {
        let arrData=this.mapObj[this.active]
        this.markerLayers.clearLayers();
        this.markerLayers.addTo(this.map);
        arrData.forEach(v => {
          let icon = L.glyphicon({
            icon: 'icon iconfont icon-tianqi1',
            size: "24",//编译为width:24px,height:24px
            fontSize: "12",
            background: this.levelMap['01'],
            color: '#fff',
            borderRadius: 24,//跟size一样大为圆形
            borderWidth: 1,
            borderColor:'#fff',
            boxShadow: false,
            additionalCSS: 'font-weight:normal;line-height:24px;',//会直接覆盖color和background设置的颜色
            className: 'className',
            effect: {
              type: "halo",//设置'halo'则默认开启光晕效果
              size: 72,//扩散的光晕的大小以长宽计算，建议大小至少在size的2倍
              color: this.levelMap['01'],//扩散的光晕的颜色
              interval: 2//动画的时长
            }
          });
          let marker = L.marker([v.lat,v.lng], { riseOffset: 300,interactive: true, draggable: false }).setIcon(icon).addTo(this.markerLayers)
          this.bindPopup(marker,v);
          this.markers.set(v.id,marker)
        })
      },
      bindPopup(marker,v) {
          let popupContent = "<div id='popup-" +v.id  + "' style='height:180px;'></div>";
          marker.bindPopup(popupContent, {offset: L.point(1, -10), minWidth: 250, closeButton: true});
          marker.on('popupopen', (e) => {
            console.log(1)
            new Vue({
              el: '#popup-' + v.id,
              render: h => h(vpopup, {props: {vdata: v, vm: this}})
            })
            //  this.markerClick(v,true)
          });
     },
     markerClick(row,isOK){
        let target=this.markers.get(row.id)
        let icon = L.glyphicon({
            icon: 'icon iconfont icon-tianqi1',
            size: "26",//编译为width:24px,height:24px
            fontSize: "14",
            background: this.levelMap['01'],
            color: '#fff',
            borderRadius: 26,//跟size一样大为圆形
            borderWidth: 1,
            borderColor:'#fff',
            boxShadow: false,
            additionalCSS: 'font-weight:normal;line-height:24px;',//会直接覆盖color和background设置的颜色
            className: 'className',
            effect: {
              type: "halo",//设置'halo'则默认开启光晕效果
              size: 64,//扩散的光晕的大小以长宽计算，建议大小至少在size的2倍
              color: this.levelMap['01'],//扩散的光晕的颜色
              interval: 3//动画的时长
            }
          });
        this.markers.forEach((v) => {v.setIcon( icon); });
        if(target){
          let flashIcon = L.glyphicon({
            icon: 'icon iconfont icon-tianqi1',
            size: "26",//编译为width:24px,height:24px
            fontSize: "14",
            background: this.levelMap['01'],
            color: '#fff',
            borderRadius: 26,//跟size一样大为圆形
            borderWidth: 1,
            borderColor:'#fff',
            boxShadow: false,
            additionalCSS: 'font-weight:normal;line-height:24px;',//会直接覆盖color和background设置的颜色
            className: "animated infinite flash slow",
            effect: {
              type: "halo",//设置'halo'则默认开启光晕效果
              size: 64,//扩散的光晕的大小以长宽计算，建议大小至少在size的2倍
              color: this.levelMap['01'],//扩散的光晕的颜色
              interval: 3//动画的时长
            }
          });
          this.map.flyTo([row.lat,row.lng],6)
          target.setIcon(flashIcon);
          let isOpen= target.isPopupOpen()
          if(!isOpen){
              target.togglePopup();
          }
          if(isOK&&this.active=='oh'){
            this.vm.$refs.dycjzhyjView.filterJson(row.id)
          }
        }
     },
  }
}
</script>

<style scoped lang="less">
  .iconMap{
    width: 2vw;
    height: 2vw;

  }
  .mapIndex{
    width: 100vw;
    height: 100vh;
    background: url("../../../public/images/indexBanner.png") no-repeat;
    background-size: 100%  100%;
  }
.changeButton{
    position: absolute;
    right: 26vw;
    z-index: 1000;
    top: 2vh;
    .buttonDiv{
        width:5vw;
        height:2.5vh;
        background:url("../../../public/images/Tai_di.png") no-repeat;
        background-size: 100% 100%;
        color: #23EDFF;
        text-align: center;
        float: left;
        margin-top: 0.5vh;
        line-height: 2.5vh;
        margin-right: 0.2vw;
        cursor:pointer;

      }
    .buttonDiv.active{
      background:url("../../../public/images/Tai_dian.png") no-repeat;
      background-size: 100% 100%;

    }
  }

</style>
<style>
.leaflet-popup-content-wrapper, .leaflet-popup-tip{
  background: transparent;
  background: url("../../../public/images/panel_bg2.png") no-repeat;
  background-size: 100% 100%;
  box-shadow:none;
  color: #FFF8DC;

}
</style>
